<template>
    <div class="allMapPart">
        <div class="map">
            <div>
                上车地点
            </div>
            <div id='myMap'></div>
        </div>

        <div class="myplace">
            <span>
                我的位置
            </span>
            <el-input class="input" v-model="address" disabled placeholder="Please input" />
        </div>

    </div>
</template>

<script setup>
    import { onMounted, ref } from "vue";
    import { useUsersStore } from "../stores/user";
    const store = useUsersStore();
    const address = ref("");
    onMounted(() => {
        // GL版命名空间为BMapGL
        const BMapGL = window.BMapGL;
        // 创建Map实例
        const map = new BMapGL.Map("myMap");
        //添加LBS解析器
        const geoc = new BMapGL.Geocoder();
        map.centerAndZoom(new BMapGL.Point(81.303995, 40.550221), 17);  // 初始化地图,设置中心点坐标和地图级别--塔里木大学
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加定位
        const geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                const mk = new BMapGL.Marker(r.point);

                map.addOverlay(mk);
                map.panTo(r.point);
                geoc.getLocation(r.point, (rs) => {
                    console.log(rs);
                    address.value = rs.address;
                    console.log(address.value)
                    store.address = address.value;
                    store.startLocationLongitude = rs.point.lng
                    store.startLocationLatitude = rs.point.lat
                })
            }
        });
    })
</script>
<style lang='less' scoped>
    .allMapPart {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0;
        padding: 0;


    }

    .map {
        margin-top: 5%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    #myMap {
        height: 183px;
        width: 183px;

    }

    .myplace {
        margin-top: 5%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .input {
        width: 70%;
    }
</style>